<template>
  <div class="soundAction">
      <ul class="actionList">
          <li class="share">
              <i></i>
              <span>分享</span>
          </li>
          <li class="like">
              <i></i>
              <span>喜欢</span>
          </li>
          <li class="download">
              <i></i>
              <span>下载</span>
          </li>
          <li v-if="!ifAudio" :class="{'video':!isAudio,'audio':isAudio}" @click="changeType">
              <i></i>
              <span>{{!isAudio?'音频':'视频'}}</span>
          </li>
      </ul>
      <div class="open-by-client">用客户端打开</div>
  </div>
</template>

<script>
import bus from "assets/playerBus"
export default {
    props:['ifAudio'],
    data(){
        return {
            isAudio:true
        }
    },
    methods:{
        changeType(){
            this.isAudio=!this.isAudio
            bus.$emit('changeType',{isAudio:this.isAudio})
        }
    }
}
</script>

<style lang="stylus" scoped>
.soundAction
    display flex
    align-items center
    padding  .14rem .12rem .1rem
    background-color #fff
    box-shadow 0 1px 10px 0 rgba(0,0,0,.05)
    .actionList
        flex 1
        display flex
        justify-content space-around
        li
            padding 0 .02rem
            cursor pointer
            text-align center
            i 
                background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png')
                background-size 2.62rem 2.34rem
                width 0.35rem
                height 0.35rem
            span 
                font-size .1rem
                display block
                margin-top .03rem
        .share i 
            background-position -1.49rem -0.74rem
        .like i 
            background-position 0rem -1.46rem
        .download i 
            background-position -0.74rem -1.46rem
        .audio i 
            background-position -1.48rem -1.46rem
        .video i 
            background-position  -1.86rem 0
    .open-by-client
        width 1.2rem
        height 0.32rem
        margin-left 0.08rem
        border 1px solid transparent
        border-radius 0.03rem
        border-color #ed7760
        background-color #ed7760
        font-size .12rem
        display flex 
        align-items center
        justify-content center
        color #fff
</style>